<template>
  <div class='logining container-fluid'>
    <div class="loginBox">
      <div class="login-logo">
        <img :src="logo" class="" alt="派团助手">
      </div>
      <h6 class="log">欢迎登录</h6>
      <form autocomplete="off">
        <label>
          <input type="text" name="username" autocomplete="off" placeholder="请输入账号" class="username" v-model="cellphone">
          <i class="username-ico"></i>
        </label>
        <label>
          <!--<input type="password" style="display:none">-->
          <input type="password" autocomplete="new-password" placeholder="请输入登录密码" class="psw" v-model="psw">
          <i class="psw-ico"></i>
        </label>
        <label class="remember-label">
          <input type="checkbox" v-model="remember" @click="oRemember($event)">
          记住密码
        </label>
        <button type="button" class="loginBtn" @click="userLogin">登&nbsp;&nbsp;录</button>
      </form>
    </div>
    <p class="Foot">Copyright © 2016-2017 广州市位讯信息科技有限责任公司版权所有   粤ICP备16032631号</p>
    <!--<Foot></Foot>-->
    <!--<loading v-show="loadingStatus"></loading>-->
  </div>
</template>
<script>
  import Foot from '@/components/public/footer'
  import Loading from '@/components/public/loading'
  import crypto from 'crypto'
  export default {
    data(){
      return{
        loadingStatus:false,
        cellphone:'',
        psw:'',
        remember:false,
        imgs:'static/images/loginbg.png',
        logo:'static/images/logo.png',
      }
    },
    computed:{
      Login_interface(){
        return this.$store.state.interface.login;
      }
    },
    methods:{
      oRemember(e){
        if(this.remember==true){
          this.delCookie('user');
          this.delCookie('names');
        }
      },
      //删除cookie
      delCookie(name){
        this.setCookie(name,null,-1);
      },
      //获取cookie
      getCookie(name){
        var reg = RegExp(`${name}=([^;]+)`);
        var arr = document.cookie.match(reg);
        if(arr){
          return arr[1];
        }else{
          return '';
        }
      },
      //设置cookie
      setCookie(name,value,day){
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = `${name}=${value};expires=${date}`;
      },
      // AES加密
      aesEncrypt(data, key) {
        var cipher = crypto.createCipher('aes192', key);
        var crypted = cipher.update(data, 'utf8', 'hex');
        crypted += cipher.final('hex');
        return crypted;
      },
      // AES解密
      aesDecrypt(encrypted, key) {
        var decipher = crypto.createDecipher('aes192', key);
        var decrypted = decipher.update(encrypted, 'hex', 'utf8');
        decrypted += decipher.final('utf8');
        return decrypted;
      },
      userLogin(){

        var cellphone = this.cellphone,
          psw = this.psw,
          url = this.Login_interface,
          self = this;
        if(cellphone === ''){
          layer.msg('手机号不可为空');
          $('input[name=username]').focus();

        }else if(psw == null){
          layer.msg('密码不可为空！');
          $('input[name=password]').focus();

        }else if(cellphone != '' && psw != null){
          layer.load(2);
          let md5 = crypto.createHash('md5').update(psw, 'utf-8').digest('hex');
          self.$ajax.post(`${url}?ver=3&platform=web&mobilePhone=${cellphone}&pass=${md5}`).then(function(res){
            layer.closeAll('loading');
            var code = res.data.code;

            if(code === '14001'){
              layer.msg('登录失败，用户名或密码错误！');
              self.psw = '';
              $('input[name=password]').focus();

            }else if(code === '10002'){
              layer.msg('版本警告！');
            }else if(code === '10000'){
              if(self.remember){
                var val = self.psw.slice(0,2)+Math.floor(Math.random()*1000)+self.psw.slice(2);
                var encrypted = self.aesEncrypt(val, 'Password!');
                self.setCookie('user',self.cellphone,7); //保存帐号到cookie，有效期7天
                self.setCookie('names',encrypted,7); //保存密码到cookie，有效期7天
              }
              var customer = res.data.result.Customer;
              sessionStorage.setItem("customer",JSON.stringify(customer));
              self.$router.push({
                path:'/stroke'
              });
            }else{
              layer.msg('登录失败，用户名或密码错误！');
              self.psw = '';
              $('input[name=password]').focus();
            }
          },function(res){
            layer.closeAll('loading');
            layer.msg('登录失败，服务器错误！');
            // new $.zxf.Dialog({
            //     title:'登录失败，服务器错误',
            //     content:'',
            //     hideClose:true,
            //     btn : [
            //         {
            //             name : "确定",
            //             action : function(){
            //                 return;
            //             }
            //         },
            //         {
            //             name : "取消",
            //             action : function(){
            //                 return;
            //             }
            //         }
            //     ]
            // })
          })
        }else{
          return;
        }
      }
    },
    components:{
      Foot,
      Loading,
    },
    mounted(){
      $('.logining').height(window.innerHeight);
      //页面初始化时，如果帐号密码cookie存在则填充
      if(this.getCookie('user') && this.getCookie('names')){
        this.cellphone = this.getCookie('user');
        var decrypted = this.aesDecrypt(this.getCookie('names'), 'Password!')
        this.psw = decrypted.slice(0,2)+decrypted.slice(5);
        this.remember= true;
      }
      // 回车登录
      document.body.addEventListener('keypress', (e) => {
        // 按下回车，登录
        if (e.keyCode === 13) {
          this.userLogin()
        }
      })


    }
  }
</script>

<style lang="scss">

  .logining{
    background: #fff url('../assets/images/bg.jpg') repeat;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 540px;
    .loginBox{
      position: absolute;
      width: 360px;
      height: 460px;
      left: 50%;
      top: 50%;
      margin-left: -180px;
      margin-top: -245px;
      padding: 30px 30px;
      background-color: #fff;
      box-sizing: border-box;
      box-shadow: 0 0 32px rgba(6,0,1,0.13);
      border-radius: 10px;
      border: 1px solid #ddd;
      .login-logo{
        width: 82px;
        height: 82px;
        border-radius: 42px;
        margin: 0 auto;
        text-align: center;
        line-height: 82px;
        background-color: #09ba79;
        img{
          display: inline-block;
        }
      }
      .log{
        text-align: center;
        font-size: 20px;
        color: #333;
        margin: 30px 0;

      }

      form{
        label{
          position: relative;
          width: 100%;
          margin-bottom: 20px;
          display: block;
          .username-ico{
            position: absolute;
            width: 42px;
            height: 42px;
            left: 0;
            top: 0;
            background: url('../assets/images/username.png') no-repeat left center;
          }
          .psw-ico{
            position: absolute;
            width: 42px;
            height: 42px;
            left: 0;
            top: 0;
            background: url('../assets/images/psw.png') no-repeat left center;
          }
          input{
            width: 100%;
            height: 42px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            padding-left: 40px;
            font-size: 14px;
            background-color: #fff;
            &:-webkit-autofill {
              box-shadow: 0 0 0px 1000px white inset !important;
            }
          }
          &.remember-label{
            line-height: 16px;
            color: #666;
            input{
              float: left;
              width: 14px;
              height: 14px;
              margin-top: 2px;
              margin-right: 5px;
            }
          }
        }
        .loginBtn{
          width: 100%;
          height: 42px;
          background-color: #09ba79;
          margin-top: 30px;
          border: 0;
          font-size: 18px;
          color: #fff;
          // font-weight: bold;
        }
      }
    }
    .Foot{
      position: absolute;
      width: 100%;
      text-align: center;
      color: #666;
      font-size: 12px;
      bottom: 20px;
    }
  }
</style>
